<template>
    <div class="note">
        <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span style="font-weight: bolder; font-size: 15px">{{note.nname}}</span>
                <el-tooltip class="item" effect="dark" content="删除笔记" placement="top-start">
                    <el-button @click="centerDialogVisible = true" type="text" icon="el-icon-delete"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="编辑笔记内容" placement="top-start">
                    <router-link :to="'/note/noteDetail/'+note.nid">
                        <el-button style="padding: 0" type="text" icon="el-icon-edit"></el-button>
                    </router-link>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="查看笔记" placement="top-start">
                    <router-link :to="'/note/noteContent/'+note.nid">
                        <el-button style="padding: 0" type="text" icon="el-icon-document"></el-button>
                    </router-link>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="编辑标题及简介" placement="top-start">
                    <el-button @click="dialogFormVisible = true" type="text" icon="el-icon-edit-outline"></el-button>
                </el-tooltip>
            </div>
            <div class="text item">
                {{note.ndesc}}
            </div>
        </el-card>

        <!--        编辑标题及简介-->
        <el-dialog title="笔记标题及简介" :before-close="handleUpdateClose" :visible.sync="dialogFormVisible" width="420px">
            <el-form :model="form">
                <el-form-item label="笔记标题" :label-width="formLabelWidth">
                    <el-input v-model="form.nname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="笔记简介" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="form.ndesc"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="updateNote">确 定</el-button>
            </div>
        </el-dialog>

<!--        删除笔记-->
        <el-dialog
                title="提示"
                :visible.sync="centerDialogVisible"
                width="30%"
                center>
            <p style="text-align: center">确认删除？</p>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteNote">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "Note",
        props: ['note'],
        data() {
            return {
                dialogFormVisible: false,
                centerDialogVisible: false,
                form: JSON.parse(JSON.stringify(this.note)),
                formLabelWidth: '80px'
            }
        },
        methods: {
            cancel() {
                //深拷贝
                this.form = JSON.parse(JSON.stringify(this.note))
                console.log('note'+this.note.ndesc+'form'+this.form.ndesc)
                this.dialogFormVisible = false
            },
            handleUpdateClose(done) {
                this.$confirm('保存并修改？')
                    .then(_ => {
                        this.updateNote()
                        done();
                    })
                    .catch(_ => {});
            },
            updateNote() {
                const _this = this
                axios.put('http://localhost:2020/note/notes/update', this.form).then(function (res) {
                    if (res.data.status === 200) {
                        _this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: 'success',
                            center: true
                        });
                        _this.dialogFormVisible = false
                        window.location.reload()
                    }
                })
            },
            deleteNote() {
                const _this = this
                axios.delete('http://localhost:2020/note/notes/delete/'+ this.form.nid).then(function (res) {
                    if (res.data.status === 200) {
                        _this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: 'success',
                            center: true
                        });
                        _this.centerDialogVisible = false
                        window.location.reload()
                    }
                })
            }
        },
        mounted() {

        }
    }
</script>

<style scoped>
    .text {
        height: 54px;
        font-size: 14px;
        /* 隐藏超出部分 */
        overflow: hidden;
        /* 文本超出就用省略号 */
        text-overflow: ellipsis;
        /* 把对象作为弹性伸缩盒子模型显示 */
        display: -webkit-box;
        /* WebKit内核的浏览器的私有属性，设置文本超出2行就用省略号 */
        -webkit-line-clamp: 3;
        /* WebKit内核的浏览器的私有属性，设置或检索伸缩盒对象的子元素的排列方式 */
        -webkit-box-orient: vertical;
    }

    .item {
        margin-bottom: 10px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 300px;
        margin-right: 30px;
        text-align: left;
    }

    .el-tooltip {
        float: right;
        padding: 3px 0;
        margin: 0 0 0 10px;
    }

</style>